<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>登录Harbor House</title>
	<link rel="stylesheet" href="../css/cssreset.css">
	<link rel="stylesheet" href="../css/login&register.css">
	<link rel="shortcut icon" href="../images/favicon.ico">
	<script src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
	<header>
		<h1></h1>
		<ul>
			<li><a href="../index.html">返回首页</a></li>
			<li>|</li>
			<li><a href="#" target="_blank">客服咨询</a></li>
		</ul>
	</header>
	<main>
		<div class="central">
			<h2></h2>
			<div class="cen_right">
				<ul>
					<li><div class="userbox libefore"></div>用户登录</li>
					<li><div class="phonebox libefore"></div>手机快捷登录</li>
				</ul>
				<form action="../index.html" class="phonelogin forms">
					<ul>
						<li>
							<input type="text" placeholder="手机号码" class="phonenum">
							<span class="phone"></span>
							<b id="phtip"></b>
						</li>
						<li>
							<input type="text" placeholder="验证码" class="codenum">
							<b id="ctip"></b>
							<div class="code">
								<img src="../images/captcha.png" alt="">
							</div>
							<div class="change code">
								看不清？<br>
								<a href="#">换一张</a>
							</div>
						</li>
						<li>
							<input type="text" placeholder="输入短信验证码" class="mess">
							<span class="message"></span>
							<b id="mtip"></b>
						</li>
						<li><button type="submit" value="获取短信验证码">获取短信验证码</button></li>
						<li><button type="submit" value="登录">登录</button></li>
					</ul>
					<a href="register.html" target="_blank">没有账号？去免费注册</a>	
				</form>
				<form action="../index.html" class="userlogin forms">
					<ul>
						<li>
							<input type="text" placeholder="请输入手机号" class="username">
							<span class="u_span"></span>
							<b id="utip"></b>
						</li>
						<li>
							<input type="password" placeholder="请输入密码" class="password">
							<span class="p_span"></span>
							<b id="pwtip"></b>
						</li>
						<li><button type="submit" value="登录">登录</button></li>
					</ul>
					<a href="register.html">没有账号？去免费注册</a>
					<p>
						<input type="checkbox" id="pass" checked><label for="pass">记住密码</label>
						<a href="#" target="_blank">忘记密码</a>
					</p>					
				</form>
			</div>
		</div>
	</main>
	<footer>
		<ul>
			<li>
				<p>新手上路</p>
				<a href="#" target="_blank">在线目录</a>
			</li>
			<li>
				<p>帮助中心</p>
				<a href="#" target="_blank">家具保养</a>
			</li>
			<li>
				<p>客户服务</p>
				<a href="#" target="_blank">会员介绍</a>
				<a href="#" target="_blank">全国门店</a>
				<a href="#" target="_blank">软装设计</a>
				<a href="#" target="_blank">会员服务</a>
				<a href="#" target="_blank">客诉受理</a>
			</li>
			<li>
				<p>
					<img src="../images/Wechat.jpg" alt="">关注官方微信
				</p>
				<p class="tweet">
					<img src="../images/tweet.jpg" alt=""><span></span>官方微博	
				</p>
			</li>
			<li>
				<p class="number">400-888-1916</p>
				<form action="">
					<input type="text" class="input">
					<span class="ser"></span>
				</form>
				<ul class="lastul">
					<li>
					<a href="#" target="_blank">
						<span class="vedio"></span>
						<p>Harbor House Life</p>
					</a>
					</li>
					<li>
					<a href="#" target="_blank">
						<span class="design"></span>
						<p class="soft">申请软装设计</p>
						<strong>Design Application</strong>
					</a>
					</li>
				</ul>
			</li>
		</ul>
		<p class="foot foot1">
			<a href="#" target="_blank">关于我们</a>
			<a href="#" target="_blank">品牌新闻 </a>
			<a href="#" target="_blank">招聘信息</a>
			<a href="#" target="_blank">客服中心</a>
			<a href="#" target="_blank">帮助中心</a>
			<a href="#" target="_blank">联系我们</a>
			<a href="#" target="_blank">全国门店</a>
			<a href="#" target="_blank">在线目录</a>
			<a href="#" target="_blank">网站地图</a>
		</p>
		<p class="foot foot2"> Harbor House 安美西石贸易（浙江）有限公司版权所有
			<a href="#" target="_blank">浙ICP备07505498号</a>
		</p>
	</footer>

	<script>

		//forms/topli
		$('.cen_right>ul>li').eq(0).click(function(){
			$(this).children().show();
			$('.phonebox').hide();
			$(this).css('background','white').siblings().css('background','#ffe592');
			$('.userlogin').show();
			$('.phonelogin').hide();
		})
		$('.cen_right>ul>li').eq(1).click(function(){
			$(this).children().show();
			$('.userbox').hide();
			$(this).addClass('.libefore');
			$(this).css('background','white').siblings().css('background','#ffe592');
			$('.phonelogin').show();
			$('.userlogin').hide();
		})

		//forms/input
		$('.forms .phonenum').focus(function(){
			$(this).css('border-color','#ffe592');
			$(this).attr('placeholder','');
			phtip.innerHTML="";
		})
		$('.forms .phonenum').blur(function(){
			$(this).css('border-color','#cccccc');
			$(this).attr('placeholder','手机号码');
			phtip.innerHTML="";
		})
		$('.forms .codenum').focus(function(){
			$(this).css('border-color','#ffe592');
			$(this).attr('placeholder','');
			ctip.innerHTML="";
		})
		$('.forms .codenum').blur(function(){
			$(this).css('border-color','#cccccc');
			$(this).attr('placeholder','验证码');
			ctip.innerHTML="";
		})
		$('.forms .mess').focus(function(){
			mtip.innerHTML="";
		})
		$('.forms .mess').blur(function(){
			mtip.innerHTML="";
		})
		$('.forms .username').focus(function(){
			$(this).css('border-color','#ffe592');
			$(this).attr('placeholder','');
			utip.innerHTML="";
		})
		$('.forms .username').blur(function(){
			$(this).css('border-color','#cccccc');
			$(this).attr('placeholder','请输入手机号');
			utip.innerHTML="";
		})
		$('.forms .password').focus(function(){
			$(this).css('border-color','#ffe592');
			$(this).attr('placeholder','');
			pwtip.innerHTML="";
		})
		$('.forms .password').blur(function(){
			$(this).css('border-color','#cccccc');
			$(this).attr('placeholder','请输入密码');
			pwtip.innerHTML="";
		})
		//input输入情况判断
		$('.userlogin').submit(function(){
			// var uname = /^[u4E00-u9FA5A-Za-z0-9_]+$/;//中文英文数字包括下划线
			var flag=true;
			var phreg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;//手机号码
			// var reg=/^\d{11}$/;
			if(!$('.username').val().match(phreg)){
				flag=false;
				utip.innerHTML="手机号码格式有误！";
			}else if($('.password').val()==''){
				flag=false;
				pwtip.innerHTML="内容不能为空！";
			}return flag;
		})
		

		$('.phonelogin').submit(function(){
			var flag=true;
			var phhreg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
			if(!$('.phonenum').val().match(phhreg)){
				flag = false;
				phtip.innerHTML="手机号码格式有误！";
			}else if($('.codenum').val()==''){
				flag = false;
				mtip.innerHTML="内容不能为空！";
			}else if($('.mess').val()==''){
				// console.log(11111111111111);
				flag = false;
				mtip.innerHTML="内容不能为空！";
			}return flag;
		})

		//forms/button
		$('.forms button').hover(function(){
			$(this).css('background','#4a332a');
		},function(){
			$(this).css('background','#ffe592');
		})

	</script>
</body>
</html>